<!DOCTYPE html>
<html>
<head>
  <title>Chrome TTS Demo</title>
  <style>
    body {
      font-family: arial, helvetica, sans-serif;
    }
    .banner {
      width: 100%;
      float: left;
    }
    .banner_left {
      padding: 8px;
      float: left;
    }
    .banner_right {
      padding: 8px;
    }
    .body_wrapper {
      width: 100%;
      float: left;
    }
    .body_left {
      border: 0;
      padding: 0;
      margin: 0;
      width: 50%;
      float: left;
    }
    .body_right {
      border: 0;
      padding: 0;
      margin: 0;
      width: 46%;
      float: left;
    }
    .body_inner {
      padding: 0 32px;
    }
    #srctext {
      width: 100%;
      font-size: 133%;
    }
    .large_button {
      font-size: 166%;
      padding: 6pt 12pt 6pt 12pt;
    }
    .box {
      margin: 10px;
      padding: 10px;
      border: 1px solid #999;
    }
    .tabbable {
      padding: 10px;
      border: 1px solid #00C;
    }
    table {
      margin-left: auto;
      margin-right: auto;
    }
    #help {
      text-align: left;
    }
    #voiceInfo {
      text-align: left;
      padding: 4px;
      border: 1px solid #aaa;
      width: 100%;
      min-height: 100px;
      overflow: auto;
    }
  </style>
  <script src="ttsdemo.js"></script>
</head>

<body>

<div class="banner">
  <div class="banner_left">
    <img src="128.png" class="logo" alt="">
  </div>
  <div class="banner_right">
    <h1>Chrome Text-to-Speech Demo</h1>
    <p>
      Use this application to try out all of the text-to-speech voices in Chrome, or
      <a href="https://chrome.google.com/webstore/search?q=tts">Search the Chrome Web Store</a>
      for more TTS voices.
    </p>
  </div>
</div>

<div class="body_wrapper">
  <div class="body_left">
    <div class="body_inner">

      Enter text here:
      <textarea id="srctext" rows="6" cols="40">This is a demo of text-to-speech in Chrome.</textarea>

      <p>
        <button class="large_button" id="speakUserTextButton">Speak</button>
        <button class="large_button" id="stopButton">Stop</button>
      </p>

      <div class="box" id="ttsStatusBox">
        TTS status: <b><span id="ttsStatus"></span></b>
      </div>

      <p>

        Click on or tab to these boxes:

      <p>

      <span tabindex="0" class="tabbable" id="speakAlpha">Alpha</span>
      <span tabindex="0" class="tabbable" id="speakBravo">Bravo</span>
      <span tabindex="0" class="tabbable" id="speakCharlie">Charlie</span>
      <span tabindex="0" class="tabbable" id="speakDelta">Delta</span>
      <span tabindex="0" class="tabbable" id="speakEcho">Echo</span>
      <span tabindex="0" class="tabbable" id="speakFoxtrot">Foxtrot</span>

    </div>
  </div>
  <div class="body_right">
    <div class="body_inner">

      <table class="simple">
        <tr>
        <td>Voice:</td>
        <td><select id="voices">
              <option value="">Unspecified</option>
            </select></td>
        </td>
        </tr>
        <tr>
        <td>Lang:</td>
        <td><select id="lang">
          <option value="">Unspecified</option>
          <option value="de">de (German)</option>
          <option value="en-GB">en-GB (British English)</option>
          <option value="en-US" selected>en-US (American English)</option>
          <option value="es">es (Spanish)</option>
          <option value="fr">fr (French)</option>
          <option value="it">it (Italian)</option>
        </select></td></tr>
        <tr>
        <td>Queuing mode:</td>
        <td><select id="enqueue">
          <option value="">Interrupt</option>
          <option value="true">Enqueue</option>
        </select></td></tr>
        <tr>
        <td>Rate:</td>
        <td><input id="rate" type="range" min="0.5" max="4.0" value="1.0" step="0.1">
        </td></tr>
        <tr>
        <td>Pitch:</td>
        <td><input id="pitch" type="range" min="0.0" max="2.0" value="1.0" step="0.2">
        </td></tr>
        <tr>
        <td>Volume:</td>
        <td><input id="volume" type="range" min="0.0" max="1.0" value="1.0" step="0.1">
        </td></tr>
      </table>

      <pre id="voiceInfo"></pre>
    </div>
  </div>
</div>

</body>
</html>
